<template>
	<view class="user-dialog" :class="{'old-user-dialog': selfIndex < currentIndex}">
		<view class="user-dialog-left">
			<view class="udl-icon">
				<image mode="widthFix" :src="systemLogo"></image>
			</view>
			<view class="udl-content">
				<view class="udl-subject">
					<text>{{info.title}}</text>
					<view class="udl-img" v-if="type == 1">
						<image :src="info.img" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="user-dialog-right">
			<view class="udr-content">
				<view class="udl-list" v-if="type == 0 || type == 1">
					<view class="udl-item" @click="radioSelectAction(index, `${item}`)" v-for="(item, index) in (info.content || [])"
					 :key="item">
						<view :class="['udl-radio', radioIndex === index ? 'active' : '']"></view>
						<view class="udl-text">
							<text>{{item}}</text>
						</view>
					</view>
				</view>
				<view class="udl-input" v-if="type == 2">
					<input type="text" v-model="inputValue" :disabled="isOver" />
					<view @click="inputAction" class="udl-input-btn"><text>确定</text></view>
				</view>
				<picker mode="date" v-if="type == 3" @change="dateSelectAction" :disabled="isOver">
					<view class="udl-date">
						<view class="udl-text">
							<text>{{dateValue || '请选择日期'}}</text>
						</view>
						<image src="../../static/icon-date.png" mode="widthFix"></image>
					</view>
				</picker>
			</view>
			<view class="udr-icon">
				<image mode="widthFix" :src="userInfo.avatarUrl"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// type 0:单选  1:单选（带图） 2:填空题 3:时间选择题
		props: [
			'type',
			'info',
			'userInfo',
			'systemLogo',
			'changeUserDialogStyle',
			'currentIndex',
			'selfIndex'
		],
		data() {
			return {
				radioIndex: -1, // 单选题答案
				isOver: false, // 本题是否已经结束，包括重新上一题
				inputValue: '', // 填空题答案
				dateValue: '' // 时间选择题答案
			}
		},
		methods: {
			/**
			 * 单选题选择
			 * @param {number} itemIndex 单选题索引
			 * @param {string} text 选择内容
			 */
			radioSelectAction(itemIndex, text) {
				if (this.isOver) return;
				this.isOver = true;
				this.radioIndex = itemIndex;
				uni.$emit('subjectFinsh', text);
			},
			// 填空题
			inputAction() {
				if (this.isOver || this.inputValue.trim() === '') return;
				this.isOver = true;
				uni.$emit('subjectFinsh', this.inputValue.trim());
			},
			// 时间选择
			dateSelectAction(r) {
				if (this.isOver) return;
				this.isOver = true;
				this.dateValue = r.detail.value;
				uni.$emit('subjectFinsh', this.dateValue);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-dialog {
		margin: 0 0 120rpx 0;
		padding: 0 30rpx 120rpx 30rpx;
		&:after {
			content: '';
			display: block;
			clear: both;
		}
	}
	
	.old-user-dialog{
		margin-bottom: 20rpx;
		padding-bottom: 0px;
	}

	.user-dialog-index {
		text-align: center;

		text {
			display: inline-block;
			background-color: rgba(0, 0, 0, .4);
			border-radius: 6rpx;
			padding: 6rpx 20rpx 0 20rpx;
			font-size: 28rpx;
			height: 40rpx;
			line-height: 40rpx;
			color: #fff;
		}
	}

	.user-dialog-left {
		margin-top: 20rpx;
		width: 100%;
		display: flex;

		&:after {
			display: block;
			clear: both;
			content: '';
		}

		.udl-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #fff;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.udl-content {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx 30rpx;
			margin-left: 20px;
			max-width: 59%;
			display: flex;
			align-items: center;
			.udl-subject {
				text {
					font-size: 32rpx;
					line-height: 40rpx;
					color: #666;
				}
				.udl-img {
					image {
						width: 100%;
					}
				}
			}
		}
	}

	.answer-again {
		width: 100%;
		text-align: right;
		margin-top: 10rpx;

		text {
			font-size: 28rpx;
			color: #999;
		}
	}

	.user-dialog-right {
		margin-top: 20rpx;
		display: flex;
		justify-content: flex-end;

		.udr-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #fff;

			image {
				display: block;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}

		.udr-content {
			background-color: #e5e5e5;
			border-radius: 16rpx;
			padding: 20rpx 20rpx;
			margin-right: 20px;
			max-width: 65%;

			text {
				font-size: 32rpx;
				color: #666;
			}
		}

		.udl-img {
			margin-top: 30rpx;
			image {
				width: 100%;
				max-width: 600px;
			}
		}

		.udl-input {
			display: flex;
			align-items: center;

			input {
				background-color: #fff;
				border: 1px solid #ddd;
				padding: 10rpx 20rpx;
				display: block;
				width: 100%;
				line-height: 60rpx;
				height: 80rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				text-align: left;
				flex: 1;
				font-size: 28rpx;
			}

			.udl-input-btn {
				display: block;
				margin-left: 10rpx;
				background-color: #5b78ff;
				border-radius: 10rpx;

				text {
					color: #fff;
					font-size: 28rpx;
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 40rpx;
				}
			}
		}

		.udl-item {
			margin-top: 20rpx;
			padding: 16rpx 20rpx;
			display: flex;
			background-color: #fff;
			border: 1px solid #ddd;
			border-radius: 16px;
			min-width: 200rpx;
			&:first-child {
				margin-top: 0;
			}
		}

		.udl-radio {
			background-color: #fff;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			border: 1px solid #bbb;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 12rpx;

			&.active {
				&:after {
					content: '';
					display: block;
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background-color: #5b78ff;
					// margin: 2rpx 0 0;
				}
			}
		}

		.udl-text {
			font-size: 32rpx;
			color: #666;
			display: block;
			flex: 1;
			margin-left: 12rpx;
		}
	}

	.udl-date {
		display: flex;
		align-items: center;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 10rpx;
		height: 80rpx;
		padding: 10rpx;
		box-sizing: border-box;

		.udl-text {
			flex: 1;
			margin-right: 10rpx;

			text {
				display: block;
				width: 100%;
			}
		}

		image {
			width: 36rpx;
		}
	}
</style>
